<template>
	<span
		class="collapse-icon iconfont"
		:class="themeConfig.isCollapse ? 'iconbx-right-indent' : 'iconbx-left-indent'"
		@click="collapse"
		:title="themeConfig.isCollapse ? '展开' : '收起'"
	>
	</span>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { GlobalStore } from "@/stores";

const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);

const collapse = () => {
	globalStore.setThemeConfig({ ...themeConfig.value, isCollapse: !themeConfig.value.isCollapse });
};
</script>

<style scoped lang="scss">
.collapse-icon {
	font-size: 18px;
	color: var(--el-color-primary-light-2);
	cursor: pointer;
}
.collapse-icon:hover {
	color: var(--el-color-primary);
}
</style>
